<template>
  <div>
    <div id="orderChart" style="width: 100%; height: 500px"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      eData: {
        address: [],
        orderCounts: [],
        productCounts: []
      },
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      this.$store.dispatch("data-analysis/order", {}).then((res) => {
        var { address, orderCounts, productCounts} = this.eData;
        res.data.forEach(item=>{
            address.push(item.delivery_address);
            orderCounts.push(item.orderCount);
            productCounts.push(item.productCount);
        });
        console.log(this.eData)
        this.initChart();
      });
    },
    initChart() {
      var ele = document.getElementById("orderChart");
      var chart = this.echarts.init(ele);
      const labelOption = {
        show: true,
        position: "insideBottom",
        distance:15,
        align: "left",
        verticalAlign: "middle",
        rotate: 90,
        formatter: "{c}  {name|{a}}",
        fontSize: 16,
        rich: {
          name: {},
        },
      };
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: ["订单量", "耗材使用量"],
        },
        xAxis: [
          {
            type: "category",
            axisTick: { show: false },
            data: this.eData.address,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "订单量",
            type: "bar",
            label: labelOption,
            emphasis: {
              focus: "series",
            },
            data: this.eData.orderCounts,
          },
          {
            name: "耗材使用量",
            type: "bar",
            label: labelOption,
            emphasis: {
              focus: "series",
            },
            data: this.eData.productCounts,
          },
        ],
      };
      chart.setOption(option);
    },
  },
};
</script>